<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<canvas class='canvas' width="600" height="600"></canvas>
		<img src='' id='imgId'/>
		<script>
			var canvas = document.querySelector('.canvas')
			var c1 = canvas.getContext('2d')
			canvas.style.border = '1px solid #000'
			
			var x0 = 100
			var y0 = 500
			var arrowWith = 10
			var maxHeight = 400
			
			// 绘制x轴
			c1.beginPath()
			c1.moveTo(x0, y0)
			c1.lineTo(500, 500)
			c1.lineTo(y0 - arrowWith, y0 - arrowWith)
			c1.moveTo(500, 500)
			c1.lineTo(y0 - arrowWith, y0 + arrowWith)
			c1.stroke()
			
			// 绘制y轴
			c1.beginPath()
			c1.moveTo(x0, y0)
			c1.lineTo(100, 100)
			c1.lineTo(x0 - arrowWith, x0 + arrowWith)
			c1.moveTo(100, 100)
			c1.lineTo(x0 + arrowWith, x0 + arrowWith)
			c1.stroke()
			
			// 绘制线段
			var data = [.5, .3, .4, .3]
			var pointWidth = 400 / (data.length + 1) 
			c1.beginPath()
			c1.strokeStyle = '#008B8B'
			for(var i = 0; i < data.length; i++){
				var x = x0 + (i+1) * pointWidth
				var y = y0 - data[i] * maxHeight
				c1.lineTo(x, y)
			}
			c1.stroke()
			
			
			// 将canvas输出到一张图片
			var img = document.querySelector('#imgId')
			img.src = canvas.toDataURL('image/png', .5)
		</script>	
	</body>
</html>
